<template>
	<view>
		<view class="content">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="consultation.name" border="none"></u--input>
				</u-form-item>
				<!-- hideKeyboard() -->
				<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true;" ref="item1">
					<u--input v-model="consultation.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="年龄" prop="userInfo.age" borderBottom ref="item1">
					<u--input v-model="consultation.age" border="none"></u--input>
				</u-form-item>
				<u-form-item label="咨询人数" prop="userInfo.number" borderBottom ref="item1">
					<u--input v-model="consultation.number" border="none"></u--input>
				</u-form-item>
				<u-form-item label="从业年数" prop="userInfo.year" borderBottom ref="item1">
					<u--input v-model="consultation.year" border="none"></u--input>
				</u-form-item>
				<u-form-item label="地址" prop="userInfo.address" borderBottom ref="item1">
					<u--input v-model="consultation.address" border="none"></u--input>
				</u-form-item>
				<text>个人介绍</text>
				<uni-card>
					<input v-model="consultation.introduce" class="introduce" type="text" placeholder="多个之间请用空格隔开" />
				</uni-card>
				<text>擅长领域</text>
				<uni-card>
					<input v-model="consultation.territory" class="introduce" type="text" placeholder="多个之间请用空格隔开" />
				</uni-card>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
				@close="showSex = false" @select="sexSelect">
			</u-action-sheet>
			<view class="beneath">
				<view @click="submit">
					<text>提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tutor: null,
				examine: {},
				showSex: false,
				model1: {
					userInfo: {
						name: '',
						sex: '',
					},
				},
				consultation: {
					id: 0,
					name: '',
					sex: '',
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'consultation.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'consultation.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		created() {
			this.consultation.id = uni.getStorageSync('loginUser').id;
			this.queryId();
		},
		onload(option){
			this.created();
		},
		methods: {
			sexSelect(e) {
				console.log(e);
				this.consultation.sex = e.name
				this.$refs.uForm.validateField('consultation.sex')
			},
			submit() {
				if (this.tutor == null) {
					uni.request({
						url: 'http://127.0.0.1:800/mhs/consultation/AddConsultation',
						data: this.consultation,
						method: 'POST',
						header: {
							'token': uni.getStorageSync('token')
						},
						success: (res) => {
							this.examine = res.data.data;
							console.log(this.examine);
							uni.showToast({
								title: `申请成功`,
								icon: 'none'
							})
							this.queryId();
						},
					});
					return;
				}
				uni.showToast({
					title: `已经成功申请成为心理咨询师，不能再进行申请`,
					icon: 'none'
				})
			},
			queryId() {
				let id = uni.getStorageSync('loginUser').id;
				uni.request({
					url: 'http://127.0.0.1:800/mhs/consultation/queryByUid?id=' + id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.tutor = res.data.data;
						console.log(this.tutor);
					},
				});
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>



<style>
	.content {
		margin-top: 3vh;
		margin-left: 3vw;
	}

	.beneath {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 10vh;
		position: absolute;
		bottom: 0;
		background-color: #F5F5F5;
	}

	.beneath view {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 33px;
		width: 80%;
		border: 0px;
		outline: none;
		background-color: #007AFF;
		border-radius: 5%;
	}

	.beneath view text {
		color: #ffffff;
	}
</style>